<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>数据可视化 - 智能水产养殖系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="bg-light">

<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="text-primary">
                <i class="bi bi-graph-up"></i> 数据可视化分析
            </h2>
            <p class="text-muted">基于鱼类数据的多维度分析图表</p>
        </div>
    </div>

    <!-- 图表展示区域 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-bar-chart"></i> 综合分析图表
                        <div class="float-end">
                            <button class="btn btn-sm btn-light" onclick="downloadAllCharts()">
                                <i class="bi bi-download"></i> 下载所有图表
                            </button>
                        </div>
                    </h5>
                </div>
                <div class="card-body">
                    <img src="data:image/png;base64,{{ chart_data }}" class="img-fluid" alt="数据分析图表">
                </div>
            </div>
        </div>
    </div>

    <!-- 详细数据表格 -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card shadow">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0"><i class="bi bi-pie-chart"></i> 鱼类种类分布</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>种类</th>
                                    <th>数量</th>
                                    <th>占比</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for species, count in species_data.items() %}
                                <tr>
                                    <td>{{ species }}</td>
                                    <td>{{ count }}</td>
                                    <td>{{ "%.1f"|format(count / species_data.values()|sum * 100) }}%</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="bi bi-weight"></i> 平均体重分析</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>种类</th>
                                    <th>平均体重(g)</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for species, weight in weight_data.items() %}
                                <tr>
                                    <td>{{ species }}</td>
                                    <td>{{ "%.1f"|format(weight) }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow">
                <div class="card-header bg-warning text-dark">
                    <h6 class="mb-0"><i class="bi bi-rulers"></i> 平均体长分析</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>种类</th>
                                    <th>平均体长(cm)</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for species, length in length_data.items() %}
                                <tr>
                                    <td>{{ species }}</td>
                                    <td>{{ "%.1f"|format(length) }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="row">
        <div class="col-12 text-center">
            <div class="btn-group" role="group">
                <a href="{{ url_for('download_chart', chart_type='species_distribution') }}" 
                   class="btn btn-outline-primary">
                    <i class="bi bi-download"></i> 下载种类分布图
                </a>
                <a href="{{ url_for('download_chart', chart_type='weight_analysis') }}" 
                   class="btn btn-outline-success">
                    <i class="bi bi-download"></i> 下载体重分析图
                </a>
                <a href="{{ url_for('download_chart', chart_type='length_analysis') }}" 
                   class="btn btn-outline-info">
                    <i class="bi bi-download"></i> 下载体长分析图
                </a>
                <a href="{{ url_for('download_chart', chart_type='weight_length_correlation') }}" 
                   class="btn btn-outline-warning">
                    <i class="bi bi-download"></i> 下载相关性分析图
                </a>
                <a href="{{ url_for('export_data') }}" class="btn btn-outline-danger">
                    <i class="bi bi-file-earmark-excel"></i> 导出Excel数据
                </a>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-12 text-center">
            <a href="{{ url_for('user_home') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回主页
            </a>
        </div>
    </div>
</div>

<script>
function downloadAllCharts() {
    const chartTypes = ['species_distribution', 'weight_analysis', 'length_analysis', 'weight_length_correlation'];
    
    chartTypes.forEach((type, index) => {
        setTimeout(() => {
            window.open(`/download_chart/${type}`, '_blank');
        }, index * 500);
    });
    
    alert('正在下载所有图表，请稍候...');
}
</script>

</body>
</html> 